<template>
  <div class="container column">
    <div class="title q-my-md">Liked</div>
    <div class="grid-video-container">
      <video-card
        v-for="video in videos"
        :key="video.id"
        :video="video"
        :ratio="1 / 1.2"
        @click="showDetail(video)"
      />
    </div>
  </div>
</template>
<script setup lang="ts">
import Video from 'src/models/Video';
import VideoCard from 'components/video/SmallVideoCard.vue';
import { computed, onMounted } from 'vue';
import { useQuasar } from 'quasar';
import { useUserStore } from 'src/stores/user-store';
import { useGlobalStore } from 'src/stores/global-store';
const userStore = useUserStore();
const globalStore = useGlobalStore();
const $q = useQuasar();
const videos = computed(() => userStore.myHistory);
onMounted(async () => {
  await userStore.getMyHistory({ page: 1, size: 20 });
});
function showDetail(video: Video) {
  globalStore.setMyContentsRightDrawer(video);
}
</script>
